﻿@{ 
    Layout = "";
}
<style>
    .body {
        background-color: white;
    }
</style>
<link href="/Content/img/wxmenu/custom-server.css" rel="stylesheet" />
<script src="/Content/img/wxmenu/iscroll.5.js"></script>
<div style="width: 100%; height: 70px; background-color:#f0eff5">
    <p style="font-size: 16px;">
        1、一级菜单最多设置3个。<br>
        2、每个一级菜单下最多设置5个二级菜单。<br>
        3、设置菜单链接-自定义链接，请输入完整的链接地址（例：链接至百度页面，请填写完整地址：https://www.baidu.com）<br>
    </p>
</div>

<div class="custom-center" ng-controller="WxMenuController">


    <div class="content-box clearfix">
        <div class="browser-box">
            <div class="browser-box-hd">
                <img src="/Content/img/wxmenu/custom-top.png" class="hd">
                <p class="name">{{MenuResponse.WxName}}</p>
            </div>

            <div class="seed-info">
                <div class="seen-info-cont">

                </div>
            </div>
            <div class="bottom-nav clearfix">
                <span class="left"><img src="/Content/img/wxmenu/custom-nav.png"></span>
                <ul class="right">
                    <li ng-repeat="menuList in MenuResponse.MenuList  | orderBy:'Sort'" ng-style="mystyle">
                        <i>{{menuList.ParentMenuName}}</i>
                        <div class="child-p" style="display: none;">
                            <p ng-repeat="childmenu in menuList.ChildMenuList  | orderBy:'Sort'">{{childmenu.MenuName}}</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="save-btn">
                保存
            </div>
        </div>
        <input id="fileInput" class="ng-hide" type="file" nv-file-select="" multiple="" uploader="uploader" />
        <input type="hidden" id="uploadFlag" />
        <div class="custom-box">
            <div class="nodata" ng-show="MenuResponse.MenuList.length==0">
                <p class="txt">还没有任何菜单</p>
                <span class="nodata-btn" ng-click="addParentMenuInit(MenuResponse.MenuList)">添加菜单</span>
            </div>
            <div class="custom-container">

                <div class="custom-info" style="top: 0px;" ng-show="MenuResponse.MenuList.length>0" ng-repeat="menuList in MenuResponse.MenuList | orderBy:'Sort' " ng-mouseup="DragingMouseUp(MenuResponse.MenuList)">
                    <!-- 一级菜单信息 -->
                    <div class="info-one clearfix">
                        <span class="left">一级菜单</span>
                        <span class="right"> <input type="text" class="nav-name" ng-model="menuList.ParentMenuName" /> </span>
                        <span class="tips">字数不超过4个汉字或8个字母</span>
                    </div>
                    <div class="par-nav" style="{{$index==MenuResponse.MenuList.length-1?'display:block':'display:none'}}">
                        <div class="parentNav">
                            <div class="info-two parent-1" ng-show="menuList.ChildMenuList.length==0">
                                <span class="left">菜单内容</span>
                                
                                    <div class="box clearfix" ng-show="menuList.ParentMenuType=='view'">
                                        <ul class="nav-list">
                                            <li class="at"><label style="margin-right:0px;"><input type="radio" name="radio-1-{{menuList.GUID}}" ng-checked="menuList.ParentMenuKey=='0'" />自定义链接</label></li>
                                        </ul>
                                        <div class="cont cont1" ng-show="menuList.ParentMenuKey=='0'" style="padding-top:10px;">
                                            <input type="text" id="parentmenuurl{{$index}}" placeholder="请输入链接地址" style="height:22px;width:310px;border:none;" ng-model="menuList.ParentMenuUrl" />
                                        </div>
                                    </div>
                                
                                
                            </div>
                        </div>
                        <!-- 二级菜单信息 end -->
                        <div class="childNav-box" style="{{menuList.ChildMenuList.length>0?'display:block':'display:none'}}">
                            <div class="child-list">
                                <div class="childNav" style="top: 0px;" ng-repeat="childmenu in menuList.ChildMenuList | orderBy:'Sort'" ng-mouseup="DragingMouseUp(menuList.ChildMenuList)">
                                    <div class="info-one clearfix">
                                        <span class="left">二级菜单</span>
                                        <span class="right"><input type="text" class="child-nav-name" ng-model="childmenu.MenuName" /></span>
                                        <span class="tips">字数不超过8个汉字或16个字母</span>
                                    </div>
                                    <div class="info-two" style="{{$index==menuList.ChildMenuList.length-1?'display:block':'display:none'}}">
                                        <span class="left">菜单内容</span>
                                        <div class="reply-type clearfix">
                                            <div class="box clearfix" ng-show="childmenu.MenuType=='view'">
                                                <ul class="nav-list">
                                                    <li class="at"><label style="margin-right:0px;"><input type="radio" name="radio-2-{{childmenu.GUID}}" ng-checked="childmenu.MenuKey=='0'" />自定义链接</label></li>
                                                </ul>
                                                <div class="cont cont1" style="padding-top:10px;" ng-show="childmenu.MenuKey=='0'">
                                                    <input type="text" id="childmenuurl{{$index}}" placeholder="请输入链接地址" style="height:22px;width:250px;border:none;" ng-model="childmenu.MenuUrl" />
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    <div class="childNav-close" ng-click="DelChildMenu($event,menuList.ChildMenuList,childmenu)">
                                        <img src="/Content/img/wxmenu/custom-small-x.png" class="img1" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="addChild" ng-click="addChildMenu($event,menuList.ChildMenuList,menuList)" ng-show="menuList.ChildMenuList.length<5">
                            <img src="/Content/img/wxmenu/custom-small-1.png" />添加子菜单
                        </div>
                    </div>
                    <span class="nav-close" ng-click="DelParentMenu($event,MenuResponse.MenuList,menuList)"><img src="/Content/img/wxmenu/custom-big-x.png" class="big-close-img" /></span>
                </div>

                <div class="addNav" ng-click="addParentMenu($event,MenuResponse.MenuList)" ng-show="MenuResponse.MenuList.length<3 && MenuResponse.MenuList.length>0">
                    <img src="/Content/img/wxmenu/custom-big-1.png">添加菜单
                </div>
            </div>
        </div>


        <div class="sub-btn text-center">
            @*<button class="btn btn-info" ng-click="SubmitMenu()">保存(暂不生成)</button>*@
            <button class="btn btn-danger" style="width:126px;" ng-click="CreateMenu()">生成菜单</button>
        </div>
    </div>

</div>
<div class="err-tips" id="errorTips">

</div>





<div style="display:none">
    <a href="" target="_blank" id="jumpLink"></a>
</div>

<script type="text/ng-template" id="passConfirmDialog">
    <div class="ngdialog-message">
        <h3>提示</h3>
        <p>删除后，该菜单下设置的内容将被删除。</p>
        <button type="button" ng-click="confirm()" class="btn btn-primary mr">确认</button>
        <button type="button" ng-click="closeThisDialog('button')" class="btn btn-default">取消</button>
    </div>
</script>
<script type="text/ng-template" id="addChildMenuDialog">
    <div class="ngdialog-message">
        <h3>提示</h3>
        <p>添加二级菜单后，一级菜单设置的内容将被清除。确定添加子菜单？</p>
        <button type="button" ng-click="confirm()" class="btn btn-primary mr">确认</button>
        <button type="button" ng-click="closeThisDialog('button')" class="btn btn-default">取消</button>
    </div>
</script>
@*<script type="text/javascript" src="http://cdn.xsmore.com/Script/zmkm/linkPop-ws.1.1.js?v=20161219"></script>*@
<script type="text/javascript">
    App.controller('WxMenuController', ['$scope', '$state', '$route', 'ngDialog', '$http', 'Notify', '$compile', '$filter', "FileUploader", function ($scope, $state, $route, ngDialog, $http, Notify, $compile, $filter, FileUploader) {
        'use strict';
        $scope.DataInit = function () {
            $http.post("/WxSet/GetWxMenu", {}).success(function (response) {
                $scope.MenuResponse = response;
                //console.log($(".bottom-nav .right li"));
                //$(".bottom-nav .right li").css("width", $(".bottom-nav .right").width() / $(".bottom-nav .right li").length + "px");
                $scope.mystyle = { "width": 338 / ($scope.MenuResponse.MenuList.length == 0 ? 1 : $scope.MenuResponse.MenuList.length) };

            });
        }

        $scope.DataInit();

        $scope.getGUI = function () {
            return Math.ceil(Math.random() * 1000000);
        }


        $scope.ParentChooseLinkType = function (type, currentmenu) {
            if (type == 0) {
                currentmenu.ServerLinkId = 0;
                currentmenu.ServerLinkType = 0;
                currentmenu.ServerLinkName = '';
                currentmenu.ParentMenuKey = '0';
            }
            if (type == 1) {
                currentmenu.ParentMenuKey = '1';
                currentmenu.ParentMenuUrl = '';
            }
        }

        $scope.ChildChooseLinkType = function (type, currentmenu) {
            if (type == 0) {
                currentmenu.ServerLinkId = 0;
                currentmenu.ServerLinkType = 0;
                currentmenu.ServerLinkName = '';
                currentmenu.MenuKey = '0';
            }
            if (type == 1) {
                currentmenu.MenuKey = '1';
                currentmenu.MenuUrl = '';
            }
        }


        // 菜单类型切换
        $(".custom-box").on("click", ".reply-type label", function () {
            var index = $(this).index(),
                parent = $(this).parents(".info-two");

            if (index == 0) {
                $($(".box", parent)[1]).slideUp();
                $($(".box", parent)[0]).slideDown();
            } else {
                $($(".box", parent)[0]).slideUp();
                $($(".box", parent)[1]).slideDown();
            }

        })

        //$scope.ChooseLink = function (event, currentmenu) {
        //    var parent = $(event.target).parents(".cont");
        //    var that = event.target;

        //    WS.linkPop.show(null, function (data) {

        //        $(that).attr("data-type", data[0]);
        //        $(that).attr("data-id", data[1]);
        //        $(".show-type", parent).html(data[2]);
        //        currentmenu.ServerLinkId = data[1];
        //        currentmenu.ServerLinkType = data[0];
        //        currentmenu.ServerLinkName = data[2];
        //    });
        //};

        // 菜单内容选项
        $(".custom-box").on("click", ".nav-list li", function () {
            var parent = $(this).parents(".box");
            var index = $(this).index();
            var box = $(".cont" + (index + 1), parent);
            if (box) {
                $(".cont", parent).hide();
                box.show();
            }

            $(".nav-list li", parent).removeClass("at");
            $(this).addClass("at");
        })


        $scope.addParentMenuInit = function (currentmenu) {
            var parentinit = {
                ParentMenuId: 0,
                ParentMenuType: 'view',
                ParentMenuName: '',
                Sort: currentmenu.length,
                ParentMenuUrl: '',
                ParentMenuKey: "0",
                ParentCustomContent: '',
                GUID: Math.ceil(Math.random() * 1000000),
                ChildMenuList: []
            };

            $(".custom-container").show();
            $(".nodata").hide();

            //$(".addNav").before(parentTemplete());

            navIndex++;
            currentmenu.push(parentinit);
            // 预览界面主菜单添加
            //addBrowserNav();
        }


        //新增子菜单
        $scope.addChildMenu = function (event, currentmenu, parentmenu) {
            var child = {
                Id: 0,
                ParentId: parentmenu.ParentMenuId,
                Sort: currentmenu.length,
                MenuType: 'view',
                MenuName: '',
                MenuUrl: '',
                MenuKey: '0',
                CustomContent: '',
                GUID: Math.ceil(Math.random() * 1000000)
            };
            if (currentmenu.length == 0) {
                ngDialog.openConfirm({
                    template: 'addChildMenuDialog',
                    className: 'ngdialog-theme-default'
                }).then(function (value) {
                    var parent = $(event.target).parents(".custom-info");

                    $(".info-two", parent).hide();
                    $(".childNav-box", parent).show();
                    $(".childNav", parent).css("border", "1px solid #fff");

                    currentmenu.push(child);
                    parentmenu.ParentMenuType = 'view';
                    parentmenu.ParentMenuType = '0';
                }, function (reason) {
                }
            );
            } else {
                var parent = $(event.target).parents(".custom-info");

                $(".info-two", parent).hide();
                $(".childNav-box", parent).show();
                $(".childNav", parent).css("border", "1px solid #fff");

                currentmenu.push(child);
                parentmenu.ParentMenuType = 'view';
                parentmenu.ParentMenuType = '0';
            }
        }


        //删除子菜单
        $scope.DelChildMenu = function (event, currentmenu, childmenu) {
            ngDialog.openConfirm({
                template: 'passConfirmDialog',
                className: 'ngdialog-theme-default'
            }).then(function (value) {
                var parent = $(event.target).parents(".childNav"),
                pp = $(event.target).parents(".custom-info");

                // 判断当前要删除的标签是否是已展开的标签，如果是的话 后面会让其它标签展开
                var at = false;
                if (!$(".info-two", parent).is(":hidden")) {
                    at = true;
                }

                //预览界面删除对应子选项
                var li = $(".bottom-nav .right li")[pp.index()];
                $($(".child-p p", li)[parent.index()]).remove();

                if (!$(".child-p p", li).length) {
                    $(".child-p", li).hide();
                }


                // 删除标签
                currentmenu.splice(currentmenu.indexOf(childmenu), 1);
                parent.remove();

                $(".addChild", pp).show();

                // 如果没有子菜单了 让主菜单隐藏的内容显示
                if (!$(".childNav", pp).length) {
                    $(".info-two", pp).show();
                    $(".childNav-box", pp).hide();
                } else {
                    if (at) {
                        var box = $($(".childNav", pp)[$(".childNav", pp).length - 1]);
                        $(".info-two", box).show();
                        box.css("border", "1px solid #23b7e5");
                    }
                }


            }, function (reason) {
            }
            );
        }




        // 展开子菜单
        $(".custom-box").on("click", ".childNav", function () {
            var parent = $(this).parents(".custom-info");

            $(".info-two", parent).hide();
            //$(".childNav-box", parent).hide();
            $(".childNav", parent).css("border", "1px solid #fff");

            $(".info-two", this).show();
            $(this).css("border", "1px solid #23b7e5");
        })

        //添加主菜单
        var navIndex = 0;
        var navWidth = $(".bottom-nav .right").width();

        var arr = [];
        $scope.addParentMenu = function (event, currentmenu) {
            var parent = {
                ParentMenuId: 0,
                ParentMenuType: 'view',
                ParentMenuName: '',
                Sort: currentmenu.length,
                ParentMenuUrl: '',
                ParentMenuKey: '0',
                ParentCustomContent: '',
                GUID: Math.ceil(Math.random() * 1000000),
                ChildMenuList: []
            };


            $(".par-nav").hide();
            //$(this).before(parentTemplete());

            navIndex++;

            currentmenu.push(parent);


            // 预览界面主菜单添加
            //$scope.addBrowserNav();

            $scope.mystyle = { "width": 338 / (currentmenu.length == 0 ? 1 : currentmenu.length) };

            if ($(".custom-container .custom-info").length >= 3) {
                $(this).hide();
                return;
            }
        }



        $scope.DelParentMenu = function (event, currentmenu, parentmenu) {
            ngDialog.openConfirm({
                template: 'passConfirmDialog',
                className: 'ngdialog-theme-default'
            }).then(function (value) {
                var parent = $(event.target).parents(".custom-info");

                // 判断当前要删除的标签是否是已展开的标签，如果是的话 后面会让其它标签展开
                var at = false;
                if (!$(".par-nav", parent).is(":hidden")) {
                    at = true;
                }

                // 删除对应预览菜单
                navIndex--;
                removeBrowserNav(parent.index());

                // 删除当前标签
                currentmenu.splice(currentmenu.indexOf(parentmenu), 1);
                parent.remove();

                $(".addNav").show();

                if (!$(".custom-box .custom-info").length) {
                    $(".custom-container").hide();
                    $(".nodata").show();
                } else {
                    if (at) {
                        var box = $($(".custom-box .custom-info")[$(".custom-box .custom-info").length - 1]);
                        // $(".info-two", box).show();
                        // $(".addChild", box).show();
                        //$(".childNav-box", box).show();
                        $(".par-nav", box).show();
                        //box[0].click();
                    }
                }
            }, function (reason) {
            }
            );

        }


        // 展开主菜单
        $(".custom-box").on("click", ".custom-info", function () {

            var target = $(event.target || event.srcElement);

            if (target.parents(".addChild").length
                || target.hasClass("addChild")
                || target.parents(".nav-close").length
                || target.hasClass("big-close-img")
                || target.parents(".childNav-close").length
                || target.hasClass("img1")
                || target[0].nodeName.toLowerCase() == "input"
                || target.parents(".parentNav").length
                || target.hasClass("parentNav")
                || target.parents(".childNav-box").length
                || target.hasClass("childNav-box")
                //|| _atmove
            ) {
                return;
            }

            // $(".par-nav").hide();
            // $(".par-nav", this).show();

            if ($(".par-nav", this).is(":hidden")) {
                $(".par-nav").hide();
                $(".par-nav", this).show();
            } else {
                $(".par-nav").hide();
            }


        })

        // 一级菜单输入内容
        $(".custom-box").on("input", ".nav-name", function () {

            var parent = $(this).parents(".custom-info"),
                li = $($(".bottom-nav .right li")[parent.index()]);
            $("i", li).html(this.value);

        }).on("blur", ".nav-name", function () {

            var _this = this;

            validaTxt8(this.value, function (bol) {
                if (!bol) {
                    showError("字数不超过4个汉字或8个字母");
                } else {
                    if (_this.value !== $(_this).attr("val")) {
                        //保存数据
                        $(_this).attr("val", _this.value);
                    }
                }
            })

        })

        //子菜单输入内容
        $(".custom-box").on("input", ".child-nav-name", function () {
            var parent = $(this).parents(".custom-info"),
                cp = $(this).parents(".childNav"),

            li = $($(".bottom-nav .right li")[parent.index()]);
            $($(".child-p p", li)[cp.index()]).html(this.value);

        }).on("blur", ".child-nav-name", function () {

            var _this = this;

            validaTxt16(this.value, function (bol) {
                if (!bol) {
                    showError("字数不超过8个汉字或16个字母");
                } else {
                    if (_this.value !== $(_this).attr("val")) {
                        //保存数据
                        $(_this).attr("val", _this.value);
                    }

                }
            })

        })

        //验证输入文字是否是数字或字母或中文，并且总字符小于等于8
        function validaTxt8(val, fn) {
            var vali = true;
            if (!/^(?:[\u4e00-\u9fa5|a-zA-Z|0-9])+?$/.test(val)) {
                vali = false;
            }

            var i = 0, txt = val.split("");
            for (var j = 0; j < txt.length; j++) {
                if (/^(?:[\u4e00-\u9fa5])+?$/.test(txt[j])) {
                    i += 2;
                } else {
                    i++;
                }

            }
            if (i > 8) {
                vali = false;

            }

            fn && fn(vali);
        }

        //验证输入文字是否是数字或字母或中文，并且总字符小于等于16
        function validaTxt16(val, fn) {
            var vali = true;
            if (!/^(?:[\u4e00-\u9fa5|a-zA-Z|0-9])+?$/.test(val)) {
                vali = false;
            }

            var i = 0, txt = val.split("");
            for (var j = 0; j < txt.length; j++) {
                if (/^(?:[\u4e00-\u9fa5])+?$/.test(txt[j])) {
                    i += 2;
                } else {
                    i++;
                }

            }
            if (i > 16) {
                vali = false;

            }

            fn && fn(vali);
        }

        // 错误提示框
        function showError(txt) {
            $("#errorTips").html(txt).show().animate({ "opacity": "1" }, 300, function () {
                setTimeout(function () {
                    $("#errorTips").animate({ "opacity": "0" }, 300, function () {
                        $("#errorTips").hide()
                    })
                }, 2000)
            })
        }


        //预览界面主菜单点击
        $(".bottom-nav .right").on("click", "li", function () {
            var target = event.target || event.srcElement;
            if ($(target).hasClass("child-p")) return;

            if ($(".child-p p", this).length) {

                if ($(".child-p", this).is(":hidden")) {
                    $(".child-p", this).show();
                } else {
                    $(".child-p", this).hide();
                }

            } else {

                var index = $(this).index();
                var box = $(".custom-info")[index];
                var parIndex = $(".parentNav .nav-list .at", box).index(),
                    cont = $(".parentNav .cont" + (parIndex + 1), box);
                //console.log("parIndex:" + parIndex);
                switch (parIndex) {
                    case 0:
                        var link = $("#parentmenuurl" + index).val();
                        //console.log(link);
                        window.open(link);
                        //var text = $("textarea", cont).val();
                        //seed(parIndex, text);
                        break;
                    case 6:
                        $("#jumpLink").attr("href", getLink(cont));
                        $("#jumpLink")[0].click();
                        break;
                    default:
                        var text = cont.html();
                        seed(parIndex, text);
                        break;
                }
            }
        })


        // 预览界面子菜单点击
        $(".bottom-nav .right").on("click", ".child-p p", function () {
            var index = $(this).index(),
                parIndex = $(this).parents("li").index();

            var box = $(".custom-info")[parIndex];
            var cont = $(".childNav", box)[index];

            var contIndex = $(".nav-list .at", cont).index();
            var cbox = $(".cont" + (contIndex + 1), cont);


            switch (contIndex) {
                case 0:
                    var link = $("#childmenuurl" + index).val();
                    window.open(link);
                    //var text = $("textarea", cbox).val();
                    //seed(contIndex, text);
                    break;
                case 6:
                    $("#jumpLink").attr("href", getLink(cbox));
                    $("#jumpLink")[0].click();
                    break;
                default:
                    var text = cbox.html();
                    seed(contIndex, text);
                    break;
            }

        })


        function seed(index, text) {

            if (text == "") return;

            var html = '<div class="seed-message clearfix"><img src="/Content/img/wxmenu/custom-hd.png"><div class="message"><span class="left-arrow"><img src="/Content/img/wxmenu/left-arrow.png"></span>' + text + '</div></div>';

            $(".seed-info .seen-info-cont").append(html);

            $(".seed-info")[0].scrollTop = $(".seen-info-cont").height() - $(".seed-info").height() + 30;

        }

        function getLink(cont) {
            var input = $("label", cont),
                len = input.length;

            var link = "";
            for (var i = 0; i < len; i++) {
                if ($(".radio", input[i])[0].checked) {
                    link = $(".radio", input[i]).attr("nhref");
                }
            }
            console.log(link);
            return link;
        }

        $scope.addBrowserNav = function () {
            //$(".bottom-nav .right").append("<li><i></i><div class='child-p' style='display:none'></div></li>");
            $(".bottom-nav .right li").css("width", (navWidth / ($scope.MenuResponse.MenuList.length)) + "px");
        }

        function removeBrowserNav(index) {
            $($(".bottom-nav .right li")[index]).remove();
            $(".bottom-nav .right li").css("width", (navWidth / $(".bottom-nav .right li").length) + "px");
        }



        function getGUI() {
            return Math.ceil(Math.random() * 1000000);
        }


        // 拖拽模块
        var draging = null, _x, _y, _left, _top, _at = false, hav = true, box = null, _atmove = false;
        $(document).on("mousedown", function () {
            var target = event.target || event.srcElement;

            _at = false;
            hav = true;

            // 过滤某些不可拖动标签
            if (target &&
                (target.nodeName.toLowerCase() == "input" ||
                    target.nodeName.toLowerCase() == "img" ||
                    target.nodeName.toLowerCase() == "textarea" ||
                    $(target).hasClass("addChild") || $(target).parents(".addChild").length ||
                    $(target).hasClass("info-two") || $(target).parents(".info-two").length
                )) {
                hav = false;
                return;
            }


            // 区分子菜单和主菜单
            if ($(target).hasClass("childNav") || $(target).parents(".childNav").length) {

                if ($(target).hasClass("childNav")) {
                    draging = target;
                } else {
                    draging = $(target).parents(".childNav");
                }

                box = $(".childNav", $(target).parents(".custom-info"));

            } else if ($(target).hasClass("custom-info") || $(target).parents(".custom-info")) {
                if ($(target).hasClass("custom-info")) {
                    draging = target;
                } else {
                    draging = $(target).parents(".custom-info");
                }

                box = $(".custom-info");
            }

            _x = event.clientX;
            _y = event.clientY;

        }).on("mousemove", function () {

            //event.preventDefault();

            if (draging && hav) {
                var curX = event.clientX - _x,
                    curY = event.clientY - _y;

                _atmove = true;

                $(draging).css({
                    //"left": curX + "px",
                    "top": curY + "px"
                })

                if (Math.abs(curY) > 10) {
                    _at = true;
                }
            }

        })

        var arr = [];
        $scope.DragingMouseUp = function (menulist) {
            menulist = $filter('orderBy')(menulist, 'Sort');
            setTimeout(function () {
                _atmove = false;
            }, 500)


            if (draging && _at && hav) {

                if (box.length == 1) {

                    $(draging).css({
                        "top": "0px"
                    })

                } else {

                    var len = box.length,
                        fbox = null;


                    var tp = 0, h = 0,
                         index = 0,
                        currentIndex = $(draging).index();  //拖动的标签的索引
                    for (var i = 0; i < len; i++) {

                        if (box[i] == draging) continue;

                        tp = $(box[i]).offset().top;

                        if (tp < $(draging).offset().top) {
                            fbox = $(box[i]);
                            index = i;
                        }
                    }

                    // console.log(menulist);


                    if (fbox) {
                        //fbox.after($(draging).css("top", "0").clone());
                        //$(draging).remove();

                        var arr1 = [], elem = menulist[currentIndex], markId = 0;
                        for (var n = 0; n < menulist.length; n++) {
                            if (currentIndex !== n) {
                                menulist[n].Sort = markId;
                                arr1.push(menulist[n]);

                                markId++;
                            }
                            if (index == n) {
                                elem.Sort = markId;
                                arr1.push(elem);
                            }


                        }

                        //console.log(arr1);
                        menulist = angular.copy(arr1);
                        //console.log(menulist);

                    } else {
                        //$(box[0]).before($(draging).css("top", "0").clone());
                        //$(draging).remove();

                        var arr1 = [], elem = menulist[currentIndex], markId = 0;
                        for (var n = 0; n < menulist.length; n++) {
                            if (currentIndex !== n) {

                                if (n == 0) {
                                    elem.Sort = markId;
                                    arr1.push(elem);

                                    markId++;
                                }

                                menulist[n].Sort = markId;
                                arr1.push(menulist[n]);

                                markId++;
                            }


                        }

                        //console.log(arr1);
                        menulist = angular.copy(arr1);
                        //console.log(menulist)

                    }

                    
                    //resetBrowserNavList();

                }



            }

            box && box.css("top", "0");
            draging = null;
        }


        // 拖拽完重置预览界面菜单
        function resetBrowserNavList() {

            var box = $(".custom-info");
            var li = "";
            var w = $(".bottom-nav .right").width() / box.length;

            for (var i = 0; i < box.length; i++) {

                li += '<li style="width: ' + w + 'px;"><i>' + $(".nav-name", box[i]).val() + '</i><div class="child-p" style="display:none">';

                var child = $(".childNav", box[i]);

                for (var j = 0; j < child.length; j++) {
                    li += '<p>' + $(".child-nav-name", child[j]).val() + '</p>';
                }

                li += '</div></li>';
            }

            $(".bottom-nav .right").html(li);

        }



        var runx = 0, runy = 0;
        var boxleft = 0;
        var canMove = false;
        $(".content-box").on("mousedown", function () {
            runx = event.pageX;
            runy = event.pageY;
            //left = this.style.transform == "" ? 0 : parseInt(this.style.transform.split("(")[1].split("px")[0], 10);
            boxleft = this.style.marginLeft == "" ? 0 : parseInt(this.style.marginLeft.split("px")[0], 10);
            canMove = true;
        })
        .on("mousemove", function () {
            var curX = event.pageX;
            var curY = event.pageY;
            var winWidth = $(".custom-center").width();

            if (canMove && winWidth < 1200 && !_at && Math.abs(runx - curX) > 30 && (Math.abs(runx - curX) > Math.abs(runy - curY))) {

                event.preventDefault();

                var curX = event.pageX;
                //this.style.transform = "translateX(" + (curX - x + left) + "px)";
                var move = curX - runx + boxleft;


                if (curX - runx > 0 && move > 0) {
                    move = 0;
                } else if (curX - runx < 0 && move < winWidth - 1200) {
                    move = winWidth - 1200;
                }
                this.style.marginLeft = move + "px";
            }



        })
        .on("mouseup mouseleave", function () {
            canMove = false;
        })

        window.onresize = function () {
            $(".content-box").css("margin-left", "0");
        }



        //保存菜单
        $scope.SubmitMenu = function () {

            var ischeck = true;
            if ($scope.MenuResponse.MenuList.length > 0) {
                angular.forEach($scope.MenuResponse.MenuList, function (value, key) {
                    //验证菜单名称
                    if (value.ParentMenuName == '' || value.ParentMenuName.length == 0) {
                        Notify.alert("主菜单名称不能为空", { status: 'warning' });
                        ischeck = false;
                        return false;
                    }

                    validaTxt8(value.ParentMenuName, function (bol) {
                        if (!bol) {
                            Notify.alert("主菜单名称字数不能超过4个汉字或8个字母", { status: 'warning' });
                            ischeck = false;
                            return false;
                        }
                    });

                    //验证子菜单
                    if (value.ChildMenuList.length > 0) {
                        angular.forEach(value.ChildMenuList, function (childvalue, key) {
                            //验证菜单名称
                            if (childvalue.MenuName == '' || childvalue.MenuName.length == 0) {
                                Notify.alert("子菜单名称不能为空", { status: 'warning' });
                                ischeck = false;
                                return false;
                            }

                            validaTxt16(childvalue.MenuName, function (bol) {

                                if (!bol) {
                                    Notify.alert("子菜单名称字数不能超过8个汉字或16个字母", { status: 'warning' });
                                    ischeck = false;
                                    return false;
                                }
                            });

                            //验证链接
                            if (childvalue.MenuType == "click") {
                                if (childvalue.MenuKey.indexOf("BTN_CUSTOMREPLY") > 0) {
                                    if (childvalue.CustomContent == '' || childvalue.CustomContent.length == 0) {
                                        Notify.alert("自动回复内容不能为空", { status: 'warning' });
                                        ischeck = false;
                                        return false;
                                    }
                                }
                            } else if (childvalue.MenuType == "view") {
                                if (childvalue.MenuKey == "0") {
                                    if (childvalue.MenuUrl == '' || childvalue.MenuUrl.length == 0) {
                                        Notify.alert("自定义链接不能为空", { status: 'warning' });
                                        ischeck = false;
                                        return false;
                                    }
                                } else {
                                    if (childvalue.ServerLinkId == 0) {
                                        Notify.alert("请选择系统链接", { status: 'warning' });
                                        ischeck = false;
                                        return false;
                                    }
                                }
                            } else {
                                //alert(value.MenuName + "：" + value.MenuKey);
                                Notify.alert("请选择菜单类型", { status: 'warning' });
                                ischeck = false;
                                return false;
                            }

                        });
                    } else {
                        //验证链接
                        if (value.ParentMenuType == "click") {
                            if (value.ParentMenuKey.indexOf("BTN_CUSTOMREPLY") > -1) {
                                if (value.ParentCustomContent == '' || value.ParentCustomContent.length == 0) {
                                    Notify.alert("自动回复内容不能为空", { status: 'warning' });
                                    ischeck = false;
                                    return false;
                                }
                            }
                        } else if (value.ParentMenuType == "view") {
                            if (value.ParentMenuKey == "0") {
                                if (value.ParentMenuUrl == '' || value.ParentMenuUrl.length == 0) {
                                    Notify.alert("自定义链接不能为空", { status: 'warning' });
                                    ischeck = false;
                                    return false;
                                }
                            } else {
                                if (value.ServerLinkId == 0) {
                                    Notify.alert("请选择系统链接", { status: 'warning' });
                                    ischeck = false;
                                    return false;
                                }
                            }
                        } else {
                            //alert(value.ParentMenuName + "：" + value.ParentMenuType);
                            Notify.alert("请选择菜单类型", { status: 'warning' });
                            ischeck = false;
                            return false;
                        }
                    }

                });
            }

            if (ischeck) {
                $http.post("/WxSet/SubmitMenu", { MenuList: $scope.MenuResponse.MenuList }).success(function (response) {

                    if (response.isSuccess) {
                        Notify.alert('保存成功!', { status: 'success' });
                        $scope.DataInit();
                    } else {
                        Notify.alert(response.msg, { status: 'warning' });
                    }
                });
            }

        }

        //生成菜单
        $scope.CreateMenu = function () {

            var ischeck = true;
            if ($scope.MenuResponse.MenuList.length > 0) {
                angular.forEach($scope.MenuResponse.MenuList, function (value, key) {
                    //验证菜单名称
                    if (value.ParentMenuName == '' || value.ParentMenuName.length == 0) {
                        Notify.alert("主菜单名称不能为空", { status: 'warning' });
                        ischeck = false;
                        return false;
                    }

                    validaTxt8(value.ParentMenuName, function (bol) {
                        if (!bol) {
                            Notify.alert("主菜单名称字数不能超过4个汉字或8个字母", { status: 'warning' });
                            ischeck = false;
                            return false;
                        }
                    });

                    //验证子菜单
                    if (value.ChildMenuList.length > 0) {
                        angular.forEach(value.ChildMenuList, function (childvalue, key) {
                            //验证菜单名称
                            if (childvalue.MenuName == '' || childvalue.MenuName.length == 0) {
                                Notify.alert("子菜单名称不能为空", { status: 'warning' });
                                ischeck = false;
                                return false;
                            }

                            validaTxt16(childvalue.MenuName, function (bol) {

                                if (!bol) {
                                    Notify.alert("子菜单名称字数不能超过8个汉字或16个字母", { status: 'warning' });
                                    ischeck = false;
                                    return false;
                                }
                            });

                            //验证链接
                            if (childvalue.MenuType == "click") {
                                if (childvalue.MenuKey.indexOf("BTN_CUSTOMREPLY") > 0) {
                                    if (childvalue.CustomContent == '' || childvalue.CustomContent.length == 0) {
                                        Notify.alert("自动回复内容不能为空", { status: 'warning' });
                                        ischeck = false;
                                        return false;
                                    }
                                }
                            } else if (childvalue.MenuType == "view") {
                                if (childvalue.MenuKey == "0") {
                                    if (childvalue.MenuUrl == '' || childvalue.MenuUrl.length == 0) {
                                        Notify.alert("自定义链接不能为空", { status: 'warning' });
                                        ischeck = false;
                                        return false;
                                    }
                                } else {
                                    if (childvalue.ServerLinkId == 0) {
                                        Notify.alert("请选择系统链接", { status: 'warning' });
                                        ischeck = false;
                                        return false;
                                    }
                                }
                            } else {
                                //alert(value.MenuName + "：" + value.MenuKey);
                                Notify.alert("请选择菜单类型", { status: 'warning' });
                                ischeck = false;
                                return false;
                            }

                        });
                    } else {
                        //验证链接
                        if (value.ParentMenuType == "click") {
                            if (value.ParentMenuKey.indexOf("BTN_CUSTOMREPLY") > -1) {
                                if (value.ParentCustomContent == '' || value.ParentCustomContent.length == 0) {
                                    Notify.alert("自动回复内容不能为空", { status: 'warning' });
                                    ischeck = false;
                                    return false;
                                }
                            }
                        } else if (value.ParentMenuType == "view") {
                            if (value.ParentMenuKey == "0") {
                                if (value.ParentMenuUrl == '' || value.ParentMenuUrl.length == 0) {
                                    Notify.alert("自定义链接不能为空", { status: 'warning' });
                                    ischeck = false;
                                    return false;
                                }
                            } else {
                                if (value.ServerLinkId == 0) {
                                    Notify.alert("请选择系统链接", { status: 'warning' });
                                    ischeck = false;
                                    return false;
                                }
                            }
                        } else {
                            //alert(value.ParentMenuName + "：" + value.ParentMenuType);
                            Notify.alert("请选择菜单类型", { status: 'warning' });
                            ischeck = false;
                            return false;
                        }
                    }

                });
            }

            if (ischeck) {
                $http.post("/WxSet/GenerateMenu", { MenuList: $scope.MenuResponse.MenuList }).success(function (response) {

                    if (response.isSuccess) {
                        Notify.alert('生成成功!', { status: 'success' });
                    } else {
                        Notify.alert(response.msg, { status: 'warning' });
                    }
                });
            }

        }

        //-------------图片选择相关
        $scope.SelectMainImage = function (currentmodel) {
            $("#uploadFlag").val(0);
            $scope.CurrentMenuModel = currentmodel;
            $("#fileInput").click();
        }

        $scope.SelectChildImage = function (currentmodel) {
            $("#uploadFlag").val(1);
            $scope.CurrentMenuModel = currentmodel;
            $("#fileInput").click();
        }

        var handleFileSelect = function (evt) {
            var file = $scope.uploadSelectFile = evt.currentTarget.files[0];
            var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
            var size = file.size;
            if (!evt.currentTarget.files[0] || !(('|jpg|jpeg|'.indexOf(type) !== -1) && size < 2048000)) {
                Notify.alert('请选择jpg格式文件且大小不大于2M', { status: 'warning' });
                return false;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                $scope.$apply(function ($scope) {
                });
            };
            if (file)
                reader.readAsDataURL(file);
        };
        $scope.ImgUploadUrl = "http://file.xsmore.com/api/image/upload"
        angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
        var uploader = $scope.uploader = new FileUploader({
            url: $scope.ImgUploadUrl + '?PlatForm=zmws&Path=MallWxMenu'
        });
        uploader.filters.push({
            name: 'imageFilter',
            fn: function (item /*{File|FileLikeObject}*/, options) {
                var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';

                var size = item.size;
                return ('|jpg|jpeg|'.indexOf(type) !== -1) && size < 2048000 && this.queue.length < 5;
            },

        });

        // CALLBACKS

        uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
            //  console.info('onWhenAddingFileFailed', item, filter, options);
        };
        uploader.onAfterAddingFile = function (fileItem) {
            var type = '|' + $scope.uploadSelectFile.type.slice($scope.uploadSelectFile.type.lastIndexOf('/') + 1) + '|';
            var size = $scope.uploadSelectFile.size;
            if ($scope.uploadSelectFile && (('|jpg|jpeg|'.indexOf(type) !== -1) && size < 2048000)) {
                fileItem.upload();
            }
            $scope.uploading = true;

            //    console.info('onAfterAddingFile', fileItem);
        };
        uploader.onAfterAddingAll = function (addedFileItems) {
            //   console.info('onAfterAddingAll', addedFileItems);
        };
        uploader.onBeforeUploadItem = function (item) {
            // console.info('onBeforeUploadItem', item);
        };
        uploader.onProgressItem = function (fileItem, progress) {
            // console.info('onProgressItem', fileItem, progress);
        };
        uploader.onProgressAll = function (progress) {
            //  console.info('onProgressAll', progress);
        };
        uploader.onSuccessItem = function (fileItem, response, status, headers) {
            console.log(response);
            if ($("#uploadFlag").val() == "0") {
                $scope.CurrentMenuModel.ParentCustomContent += "http://img.xsmore.com/zmws" + response[0] + ",";
            } else if ($("#uploadFlag").val() == "1") {
                $scope.CurrentMenuModel.CustomContent += "http://img.xsmore.com/zmws" + response[0] + ",";
            }

            $("#fileInput").val("");
            //  console.info('onSuccessItem', fileItem, response, status, headers);
        };
        uploader.onErrorItem = function (fileItem, response, status, headers) {
            //  console.info('onErrorItem', fileItem, response, status, headers);
        };
        uploader.onCancelItem = function (fileItem, response, status, headers) {
            // console.info('onCancelItem', fileItem, response, status, headers);
        };
        uploader.onCompleteItem = function (fileItem, response, status, headers) {
            //  console.info('onCompleteItem', fileItem, response, status, headers);
        };
        uploader.onCompleteAll = function () {
            $scope.uploading = false;
        };


    }]);
</script>
